<template>
  <div class="addstage">
    <el-dialog :visible.sync="dialog" :before-close="handleClose" title="添加课程" width="980px">
      <div class="search-wrap">
        <el-cascader
          :options="option1"
          v-model="listQuery.children"
          placeholder="请选择"
          style="width:120px;"
        />
        <el-cascader
          :options="option2"
          v-model="listQuery.children"
          placeholder="全部"
          style="width:120px;"
        />
        <el-input v-model="listQuery.data3" style="width:140px;" placeholder="课程名"/>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <div class="list-wrap">
        <ul class="detail-learn-subject">
          <template v-for="(item,index) in list">
            <li :key="index" class="detail-learn-subject-list">
              <el-row :gutter="20">
                <el-col :span="5">
                  <img :src="item.imgurl" alt style="width:100%;height:100%;">
                </el-col>
                <el-col :span="13">
                  <span class="content-title">{{ item.contentTitle }}</span>
                  <p style="color:#c6c6c7">{{ item.subtitle }}</p>
                  <span
                    :style="item.classWay=== '录播'? recordWay: onWay"
                    class="content-way"
                  >{{ item.classWay }}</span>
                </el-col>
                <el-col :span="6">
                  <div class="right-wrap">
                    <div class="class-checkbox">
                      <el-checkbox v-model="item.checked"/>
                    </div>
                    <div class="class-detail">讲师:{{ item.teacher }} | 课时: {{ item.classTime }}</div>
                  </div>
                </el-col>
              </el-row>
            </li>
          </template>
        </ul>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handlePush">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      listQuery: {
        parent: '',
        children: '',
        data3: ''
      },
      option1: [],
      option2: [],
      list: [
        {
          imgurl: '/src/assets/user_images/language.png',
          subtitle: '不同的学生可以根据自己的个人体验，选择熟悉的素材，表达真情实感，彰显自我个性。',
          contentTitle: '高三语文作文重点突击',
          classWay: '直播',
          teacher: '陈红',
          classTime: '3小时',
          checked: false
        },
        {
          imgurl: '/src/assets/user_images/language.png',
          subtitle: '不同的学生可以根据自己的个人体验，选择熟悉的素材，表达真情实感，彰显自我个性。',
          contentTitle: '高三语文作文重点突击',
          classWay: '录播',
          teacher: '陈红',
          classTime: '3小时',
          checked: true
        }
      ],
      recordWay: { backgroundColor: '#f89e29' },
      onWay: { backgroundColor: '#4297ff' }
    }
  },
  computed: {
    dialog() {
      return this.visibleDialog
    },
    total() {
      return this.list.length
    }
  },
  methods: {
    handleClose() {
      this.$emit('closeAddClass')
    },
    handlePush() {
      this.$emit('closeAddClass')
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss">
.addstage {
  .el-dialog {
    border-radius: 5px;
    .search-wrap {
      margin-bottom: 20px;
    }
    .list-wrap {
      .detail-learn-subject {
        padding: 0 25px;
        margin: 0;
        width: 100%;
        list-style: none;
        &-list {
          height: 120px;
          padding: 10px 10px 24px 10px;
          border: 1px solid #dcdfe6;
          border-radius: 3px;
          margin-bottom: 20px;
          .el-col {
            height: 100px;
            position: relative;
            span.content-way {
              position: absolute;
              bottom: 5px;
              color: #fff;
              font-size: 14px;
              padding: 5px 20px;
            }
            .right-wrap {
              width: 100%;
              height: 100%;
              position: relative;
              .class-checkbox {
                font-size: 20px;
                position: absolute;
                right: 0;
                cursor: pointer;
              }
              .class-detail {
                position: absolute;
                right: 0;
                bottom: 10px;
                .el-checkbox__label {
                  color: #3d3d3d;
                  font-size: 18px;
                }
              }
            }
          }
          .content-title {
            color: #3d3d3d;
            font-size: 16px;
          }
          p {
            margin: 0;
            margin-top: 5px;
            font-size: 14px;
            color: #8a8b8c;
          }
        }
      }
    }
  }
}
</style>
